<template>
  <div class="left2">
    <div class="small-title">
      <span>土壤墒情</span>
    </div>
    <div class="crop-rank" ref="leftTwoEcharts"></div>
  </div>
</template>
<script setup>
import {onMounted, ref} from 'vue'
import * as echarts from 'echarts'

const leftTwoEcharts = ref(null);
onMounted(() => {
  const mychart = echarts.init(leftTwoEcharts.value);
  const option = {
    tooltip: {
      trigger: 'axis', //坐标轴触发，主要应用折线图，柱状图
      axisPointer: {
        type: 'cross',
        // label: {
        //   backgroundColor: '#fff'
        // }
      }
    },
    legend: {
      data: ['土壤温度', '土壤湿度'], //图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name
      left: '5%',
      icon: "rect",
      textStyle: {
        color: '#dff',

      },
    },
    grid: {/*直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。*/
      left: '5%',//grid 组件离容器距离
      right: '8%',
      bottom: '10%',
      containLabel: true, //grid 区域是否包含坐标轴的刻度标签。
    },
    xAxis: [//直角坐标系 grid 中的 x 轴
      {
        type: 'category',//坐标轴类型，
        boundaryGap: false,//折线整体留白
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisLabel: {
          color: '#fff'//给x轴的数字上白色
        }
      }
    ],
    yAxis: {//直角坐标系 grid 中的 y 轴
      type: "value",
      nameTextStyle: {
        color: "#fff"
      },//坐标轴，数值轴适用于连续数据
      name: "单位 | 万亩",
      //  min: 0,
      //  max: 1000,
      interval: 250,
      axisLabel: {
        textStyle: {
          color: "#fff"
        }
      },
      splitLine: {
        show: false,
      }
    },
    series: [

      {
        name: '土壤湿度',
        color: '#1E90FF',
        type: 'line',
        stack: 'total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [260, 280, 300, 450, 460, 470, 480, 490, 500, 520, 550, 500]
      },
      {
        name: '土壤温度',
        color: '	#48D1CC',
        type: 'line',
        stack: 'total',
        label: {
          position: 'top'
        },
        areaStyle: {},//覆盖折线区域的面积
        emphasis: {
          focus: 'series'
        },
        data: [490, 520, 550, 575, 600, 640, 690, 720, 750, 725, 700, 680]
      }
    ]
  };
  mychart.setOption(option);
})
</script>
<style lang="scss" scoped>
.left2 {
  background: url("@/assets/img/backg1.png");
  background-size: 100% 100%;
  width: 100%;
  height: calc(100% / 3 - 57px);
  top: calc(100% / 3 + 50px);
  position: relative;

  .small-title {
    left: 5%;
    position: relative;

    span {
      color: rgb(157, 211, 236);
      position: relative;
    }
  }

  .crop-rank {
    width: 100%;
    height: 100%;
  }

}
</style>
